<html>

<head>
    <title>字典信息系统</title>
    <meta charset="UTF-8">
    <script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.1.1/jquery.min.js"></script>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css">
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <script>
        // 获取分页数据
        $(function () { // DOM 加载完毕默认要执行的函数
            $.ajax({
                url: "dictionary/getDictionaries",
                data: "pn=1",
                type: "get",
                success: function (result) {
                    $("#currentPage").text(result.pageNum);
                    $("#pages").text(result.pages);
                    $("#total").text(result.total);
                    // 1、解析并显示员工数据
                    buildUsersTab(result);
                    // 2、解析显示分页信息
                    buildNavTab(result);
                }
            });
        })

        // 获取第几页的数据
        function toPage(pn) {
            console.log("获取第" + pn + "页数据");
            $.ajax({
                url: "dictionary/getDictionaries",
                data: "pn=" + pn,
                type: "GET",
                success: function (result) { // 这里面是不是就包括有当前页是第几页
                    // console.log("第" + pn +"页数据",result)
                    // 重新构建数据table
                    buildUsersTab(result);
                    // 重新构建分页条
                    buildNavTab(result);
                    // 更新表格左下角的页码
                    updateCurrentPage(result.pageNum);
                }
            });
        }

        function updateCurrentPage(pageNum) {
            $("#currentPage").text(pageNum);
        }

        // 构建分页条
        function buildNavTab(result) {

            // $("#userstab tbody").empty(); // 这个是去掉表格数据
            $("#pnav").empty();
            console.log(result.hasPreviousPage + "---", result);
            var ul = $("<ul></ul>").addClass("pagination")
            var firstPageLi = $("<li></li>").append($("<a onclick='toPage(1)'></a>").append("首页").attr("href", "#"));
            var prePageLi;
            var nexPageLi;
            if (!result.hasPreviousPage) {
                prePageLi = $("<li></li>").addClass("disabled").append($("<a onclick='toPage(" + (result.pageNum - 1) + ")'></a>").append("&laquo;").attr("href", "#")); // 上一页
            } else {
                prePageLi = $("<li></li>").append($("<a onclick='toPage(" + (result.pageNum - 1) + ")'></a>").append("&laquo;").attr("href", "#")); // 上一页
            }
            if (!result.hasNextPage) {
                nexPageLi = $("<li></li>").addClass("disabled").append($("<a onclick='toPage(" + (result.pageNum + 1) + ")'></a>").append("&raquo;").attr("href", "#")); // 下一页
            } else {
                nexPageLi = $("<li></li>").append($("<a onclick='toPage(" + (result.pageNum + 1) + ")'></a>").append("&raquo;").attr("href", "#")); // 下一页
            }

            var lastPageLi = $("<li></li>").append($("<a onclick='toPage(" + result.pages + ")'></a>").append("尾页").attr("href", "#"));
            ul.append(firstPageLi).append(prePageLi);
            // 遍历总的页数
            $.each(result.navigatepageNums, function (index, item) { // item 是分页条上的页码
                // 选中页要成为激活状态active
                var numli;
                if (result.pageNum == item) { // 后台返回的数据显示在表格里的页的数据（有个第几页） == 当前点的页码
                    numli = $("<li></li>").addClass("active").append($("<a onclick='toPage(" + item + ")'></a>").append(item));
                } else {
                    numli = $("<li></li>").append($("<a onclick='toPage(" + item + ")'></a>").append(item));
                }
                ul.append(numli);
            });


            ul.append(nexPageLi).append(lastPageLi);
            var nav = $("<nav></nav>").append(ul);
            nav.appendTo("#pnav");
        }

        function buildUsersTab(obj) {
            $("#userstab tbody").empty();
            // 得到obj中的LIST
            var users = obj.list;
            console.log(users);
            // users：遍历的集合list
            // item：每一条数据
            $.each(users, function (index, item) {
                var chebox = $("<td></td>").append("<input type='checkbox' value='"+item.id+"' onclick='getid("+item.id+")'>");
                var id = $("<td></td>").append(item.id);
                var name = $("<td></td>").append(item.name);
                var type = $("<td></td>").append(item.type);
                var status = $("<td></td>").append(item.status);
                var comment = $("<td></td>").append(item.comment);
                var start_time = $("<td></td>").append(item.startTime);

                var editBtn = $("<button type='button' class='btn btn-primary' data-toggle='modal' data-target='#myModal3' onclick='edit(" + JSON.stringify(item) + ")'>编辑</button>");
                var deleteBtn = $("<button onclick=del(" + item.id + ")>删除</button>").addClass("btn btn-danger");
                var btnTd = $("<td></td>").append(editBtn).append(deleteBtn);
                $("<tr></tr>")
                    .append(chebox)
                    .append(id)
                    .append(name)
                    .append(type)
                    .append(status)
                    .append(comment)
                    .append(start_time)
                    .append(btnTd)
                    .appendTo("#userstab tbody");
            });
        }

        function getid(id){
            document.getElementById("id2").value+=id+",";
        }

        function del(id) {

            if(this.confirm("确认删除？")){
                $.ajax({
                    url: "dictionary/delete",
                    data: {
                        id: id
                    },
                    type: "get",
                    success: function (result) {
                        if(result=="Y"){
                            alert("删除成功！")
                        }else{
                            alert("删除失败！")
                        }
                        location.reload()
                    }
                });
            }

        }

        function add() {
            let user = {
                name:document.getElementById("aname").value,
                type:document.getElementById("atype").value,
                status:document.getElementById("astatus").value,
                comment:document.getElementById("acomment").value,
                startTime:document.getElementById("astime").value
            }

            console.log(JSON.stringify(user));

            $.ajax({
                url: "dictionary/add",
                data: JSON.stringify(user),
                type: "post",
                dataType: "text",
                contentType: "application/json;charset=utf-8",
                success: function (res) {
                    if (res == "Y") {
                        alert("添加成功")
                    }else {
                        alert("添加失败")
                    }
                    location.reload();
                },
                complete: function (err) {
                    console.log(err)
                }
            });
        }

        function reset() {
            location.reload()
        }

        function d(event) {
            event.preventDefault();
            var value = $("#rdata").val();
            $.ajax({
                url: "user/delete",
                data: {
                    id: value
                },
                type: "get",
                success: function (result) {
                    u(event)
                }
            });
        }


        function edit(item) {
            document.getElementById("id3").value = item.id;
            document.getElementById("aname3").value=item.name
            document.getElementById("atype3").value=item.type,
            document.getElementById("astatus3").value=item.status,
            document.getElementById("acomment3").value=item.comment,
            document.getElementById("astime3").value=item.startTime
        }

        function saveEditData() {
            let user = {
                id: document.getElementById("id3").value,
                name:document.getElementById("aname3").value,
                type:document.getElementById("atype3").value,
                status:document.getElementById("astatus3").value,
                comment:document.getElementById("acomment3").value,
                startTime:document.getElementById("astime3").value
            }

            $.ajax({
                url: "dictionary/edit",
                data: JSON.stringify(user),
                type: "post",
                dataType: "text",
                contentType: "application/json;charset=utf-8",
                success: function (res) {
                    if (res == "Y") {
                        alert("编辑成功")
                    } else {
                        alert("编辑失败")
                    }
                    location.reload()
                },
                complete: function (err) {
                    console.log(err)
                }
            });
        }

        function search() {
            var value1 = $("#zdName").val();
            var value2 = $("#zdType").val();
            var value3 = $("#zdstatus").val();
            var value4 = $("#zdstime").val();
            var value5 = $("#zdetime").val();

            if(value1=="" || value2=="" || value3=="" || value4=="" || value5==""){
                alert("请输入所有条件框的值");
                return;
            }

            $.ajax({
                url: "dictionary/searchByFour",
                data: {
                    name: value1,
                    type:value2,
                    status:value3,
                    stime:value4,
                    etime:value5
                },
                type: "post",
                success: function (result) {
                    if(result.length==0){
                        alert("查无此人！");
                        return;
                    }
                    console.log(result);

                    $("#userstab tbody").empty();
                    for (let i = 0; i < result.length; i++) {
                        item = result[i];

                        var chebox = $("<td></td>").append("<input type='checkbox' value='"+item.id+"'>");
                        var id = $("<td></td>").append(item.id);
                        var name = $("<td></td>").append(item.name);
                        var type = $("<td></td>").append(item.type);
                        var status = $("<td></td>").append(item.status);
                        var comment = $("<td></td>").append(item.comment);
                        var start_time = $("<td></td>").append(item.startTime);

                        var editBtn = $("<button type='button' class='btn btn-primary' data-toggle='modal' data-target='#myModal' onclick='edit(" + JSON.stringify(item) + ")'>编辑</button>");
                        var deleteBtn = $("<button onclick=del(" + item.id + ")>删除</button>").addClass("btn btn-danger");
                        var btnTd = $("<td></td>").append(editBtn).append(deleteBtn);
                        $("<tr></tr>")
                            .append(chebox)
                            .append(id)
                            .append(name)
                            .append(type)
                            .append(status)
                            .append(comment)
                            .append(start_time)
                            .append(btnTd)
                            .appendTo("#userstab tbody");
                    }
                }
            });
        }

        function beforemodify(){
            document.getElementById("id2").value=document.getElementById("id2").value.substring(0,document.getElementById("id2").value.length-1)
        }
        function modify(){
            let user = {
                sid: document.getElementById("id2").value,
                name:document.getElementById("aname2").value,
                type:document.getElementById("atype2").value,
                status:document.getElementById("astatus2").value,
                comment:document.getElementById("acomment2").value,
                startTime:document.getElementById("astime2").value
            }

            $.ajax({
                url: "dictionary/modify",
                data: JSON.stringify(user),
                type: "post",
                dataType: "text",
                contentType: "application/json;charset=utf-8",
                success: function (res) {
                    if (res == "Y") {
                        alert("修改成功")
                    } else {
                        alert("修改失败")
                    }
                    location.reload()
                },
                complete: function (err) {
                    console.log(err)
                }
            });
        }

        function dc(){
            $.ajax({
                url: "dictionary/excelOut",
                type: "post",

                success: function (res) {
                    alert("导出成功！")
                },
                complete: function (err) {
                    console.log(err)
                }
            });
        }

        function alldel(){
            document.getElementById("id2").value=document.getElementById("id2").value.substring(0,document.getElementById("id2").value.length-1)
            var sid=document.getElementById("id2").value
            console.log(sid)

            $.ajax({
                url: "dictionary/alldel",
                data: {
                    sid:sid
                },
                type: "post",
                dataType: "text",

                success: function (res) {
                    if (res == "Y") {
                        alert("删除成功")
                    } else {
                        alert("删除失败")
                    }
                    location.reload()
                },
                complete: function (err) {
                    console.log(err)
                }
            });

        }
    </script>
</head>

<body>
<!--<input type="hidden" id="cheboxvalue">-->
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">编辑用户信息</h4>
            </div>
            <div class="modal-body">
                <input type="hidden" id="id1">
                艾滋病危险人员姓名：<input type="text" id="name1"><font color="red">*必填</font><br /><br />
                艾滋病危险人员证件号码：<input type="text" id="id_num1"><font color="red">*必填</font><br /><br />
                艾滋病危险人员性别：<select id="sex1"><option>男</option><option>女</option></select><font color="red">*必填</font><br /><br />
                艾滋病危险人员电话：<input type="text" id="phone1"><br /><br />
                艾滋病危险人员感染途径：<select id="infect_ways1"><option>异性性传播</option><option>同性性传播</option><option>注射毒品传播</option><option>母婴传播</option><option>输血及使用血制品传播</option><option>性接触加注射毒品传播</option><option>既往采血浆传播</option><option>不详</option></select><br /><br />
                艾滋病危险人员是否有犯罪史：<input type="text" id="is_cursion1"><br /><br />

                艾滋病危险人员违法犯罪情况：<input type="text" id="cursion_situation1"><br /><br />
                艾滋病危险人员案件类别：<input type="text" id="case_type1"><br /><br />
                艾滋病危险人员关注类型：<select id="notice_type1"><option>无</option><option>故意传播</option><option>造谣传谣</option><option>恐吓</option><option>聚众上防</option><option>非正常维权</option><option>非正常上防</option></select><br /><br />
                艾滋病危险人员帮扶情况：<input type="text" id="help_situation1"><br /><br />
                艾滋病危险人员帮扶人姓名：<input type="text" id="helper_name1"><br /><br />
                艾滋病危险人员帮扶人电话：<input type="text" id="helper_phone1"><br /><br />

                艾滋病危险人员收治情况：<select id="receive_situation1"><option>无</option><option>羁押</option><option>抗病毒治疗</option><option>戒毒药物维持治疗</option><option>其他</option></select><br /><br />
                艾滋病危险人员收治机构名称：<input type="text" id="receive_organization1"><br /><br />
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="saveEditData()">编辑</button>
            </div>
        </div>
    </div>
</div>

<div class="form-group">

</div>

<div class="form-group">
    字典名称：<input type="text" id="zdName"/>&nbsp;&nbsp;
    字典类型：<input type="text" id="zdType"/>&nbsp;&nbsp;
    字典状态：<select id="zdstatus"><option>正常</option><option>禁用</option></select>&nbsp;&nbsp;
    创建时间：<input type="date" id="zdstime" placeholder="开始时间">-<input type="date"id="zdetime" placeholder="结束时间">&nbsp;&nbsp;

    <button class="btn btn-success" onclick="search()">搜索</button>
    <button class="btn btn-danger" onclick="reset()">重置</button><br><br>

    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal1" onclick="add()">添加</button>
    <button type="button" class="btn btn-success" data-toggle="modal" data-target="#myModal2" onclick="beforemodify()">修改</button>
    <button type="button" class="btn btn-info" onclick="alldel()">删除</button>
    <button type="button" class="btn btn-danger" onclick="dc()">导出</button>
        <!-- Button trigger modal -->

        <!-- Modal -->
        <div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel1">新增字典信息</h4>
                    </div>
                    <div class="modal-body">
                        字典名称：<input type="text" id="aname"><br><br>
                        字典类型：<input type="text" id="atype"><br><br>
                        字典状态：<input type="text" id="astatus" value="正常" placeholder="正常"><br><br>
                        备注：<input type="text" id="acomment"><br><br>
                        创建时间：<input type="date" id="astime"><br><br>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button type="button" class="btn btn-primary" onclick="add()">添加</button>
                    </div>
                </div>
            </div>
        </div>

    <div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel2">修改字典信息</h4>
                </div>
                <div class="modal-body">
                    <input type="text" id="id2">
                    字典名称：<input type="text" id="aname2"><br><br>
                    字典类型：<input type="text" id="atype2"><br><br>
                    字典状态：<input type="text" id="astatus2" value="正常" placeholder="正常"><br><br>
                    备注：<input type="text" id="acomment2"><br><br>
                    创建时间：<input type="date" id="astime2"><br><br>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" onclick="modify()">修改</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="myModal3" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel3">编辑字典信息</h4>
                </div>
                <div class="modal-body">
                    <input type="hidden" id="id3">
                    字典名称：<input type="text" id="aname3"><br><br>
                    字典类型：<input type="text" id="atype3"><br><br>
                    字典状态：<select id="astatus3"><option>正常</option><option>禁用</option></select><br><br>
                    备注：<input type="text" id="acomment3"><br><br>
                    创建时间：<input type="date" id="astime3"><br><br>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" onclick="saveEditData()">编辑</button>
                </div>
            </div>
        </div>
    </div>


    <table class="table table-striped" id="userstab">
        <thead>
        <th><input type="checkbox"></th>
        <th>字典主键</th>
        <th>字典名称</th>
        <th>字典类型</th>
        <th>字典状态</th>
        <th>备注</th>
        <th>创建时间</th>
        <th>操作</th>
        </thead>
        <tbody>
        <!-- 显示遍历出来的用户数据 -->
        </tbody>
        <tfoot>
        <tr>
            <td colspan="3">
                当前<span id="currentPage"></span>页，共有<span id="pages"></span>页，共有<span id="total"></span>条数据

            </td>
            <td colspan="5" align="center">

                <nav aria-label="Page navigation" id="pnav">
                    <%-- <ul class="pagination">--%>
                    <%-- <li class="disabled">--%>
                        <%-- <a href="#" aria-label="Previous">--%>
                            <%-- <span aria-hidden="true">&laquo;</span>--%>
                            <%-- </a>--%>
                        <%-- </li>--%>
                    <%-- <li><a href="#">1</a></li>--%>
                    <%-- <li class="active"><a href="#">2</a></li>--%>
                    <%-- <li><a href="#">3</a></li>--%>
                    <%-- <li><a href="#">4</a></li>--%>
                    <%-- <li><a href="#">5</a></li>--%>
                    <%-- <li>--%>
                        <%-- <a href="#" aria-label="Next">--%>
                            <%-- <span
                                    aria-hidden="true">&raquo;</span>--%>
                            <%-- </a>--%>
                        <%-- </li>--%>
                    <%-- </ul>--%>
                </nav>
            </td>
        </tr>
        </tfoot>
    </table>
</div>

</body>

</html>